import styles from './styles.module.scss';
import audio from './images/music.png';
import src from '../../assets/music.mp3';

export default {
  props: {
    src: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      status: false,
      mySound: null
    }
  },

  mounted () {
    this.mySound = new Audio();
    this.mySound.src = src;
    this.mySound.loop = true;
    this.mySound.autoplay = true;
  },

  beforeUnmount () {
    this.mySound.pause();
    this.mySound = null;
  },

  methods: {
    click () {
      const mySound = this.mySound;
      if (!mySound.paused) {
        this.status = false;
        mySound.pause();
        this.changePlayState('paused');
      } else {
        this.status = true;
        mySound.play();
        this.changePlayState('running');
      }
    },

    changePlayState(state) {
      if (this.$refs['audio']) {
        this.$refs['audio'].style.animationPlayState = state;
      }
    }
  },

  render() {
    return (
      <div class={styles['music']} onClick={this.click} ref='audio'>
        <img src={audio}></img>
      </div>
    );
  }
}